import React, { useState, useEffect } from 'react'
import './style.less'
import classNames from 'classnames'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'

interface Props {
  source: 'item_set' | 'website'
}
const Nav: React.FC<Props> = (props: Props) => {
  const { source } = props
  const location = useLocation()
  const navigate = useNavigate()
  let tabList = [
    {
      label: '类别维护',
      path: '/itemSet/category'
    },
    {
      label: '基础数据集合维护',
      path: '/itemSet/list'
    }
  ]
  if (source === 'website') {
    tabList = [
      {
        label: '业务领域维护',
        path: '/website/category'
      },
      {
        label: '组件产品维护',
        path: '/website/list'
      }
    ]
  }
  const [tabIndex, settabIndex] = useState(0)

  const tabChange = (item: any, index: number) => {
    settabIndex(index)
    navigate(item.path, {
      state: {
        params: {
          breadType: 'reset'
        }
      }
    })
  }
  const handleActiveTab = (path: string) => {
    settabIndex(tabList.findIndex((item) => item.path === path))
  }
  useEffect(() => {
    handleActiveTab(location.pathname)
  }, [location])

  return (
    <div className="operation-item-set-website-nav-wrapper">
      {!location.pathname.includes('/atlasDetail') && (
        <div className="tab-box">
          {tabList.map((item, index) => (
            <div key={item.path} className={classNames('item', { listActived: tabIndex === index })} onClick={() => tabChange(item, index)}>
              {item.label}
            </div>
          ))}
        </div>
      )}
      <Outlet />
    </div>
  )
}

export default Nav
